<template>
  <div class="welfare-container page">
    <div class="home-top-bar"><span>福利</span></div>
    <div class="welfare-scroll">
      <div class="hot-game">
        <div class="hot-title-div">
          <img :src="require('../assets/img/tip/new-lottery-title.png')">
        </div>
        <div class="hot-items-div">
          <ul class="">
            <li v-for="item in services" :key="item.id" @click="gotoLive(item.id)" style="margin-bottom: 15px;">
              <div class="pad-content">
                <img :src="item.ico">
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="welfare-list">
        <ul>
          <li @click="$router.push({name: 'FangPian'})">
            <div>
              <img :src="require('../assets/img/tip/new-fangpian.png')">
              <span>防骗指南</span>
            </div>
            <div>
              <i class="van-badge__wrapper van-icon van-icon-arrow font-gray" style="font-size: 14px;"><!----><!---->
                <!----></i>
            </div>
          </li>
          <li @click="showDialog = true">
            <div>
              <img :src="require('../assets/img/tip/new-pipei.png')">
              <span>在线匹配</span>
            </div>
            <div>
              <i class="van-badge__wrapper van-icon van-icon-arrow font-gray" style="font-size: 14px;"><!----><!---->
                <!----></i>
            </div>
          </li>
          <li @click="gotoSign">
            <div>
              <img :src="require('../assets/img/tip/new-qiandao.png')">
              <span>每日签到</span>
            </div>
            <div>
              <i class="van-badge__wrapper van-icon van-icon-arrow font-gray" style="font-size: 14px;"><!----><!---->
                <!----></i>
            </div>
          </li>
        </ul>
        <div class="van-overlay" style="z-index: 15; animation-duration: 0.2s; display: none;"><!---->
        </div>
      </div>
      <div class="notice-bar notice_100">
        <div class="wrapper">
          <i class="van-badge__wrapper iconfont iconfont-notice icon"
             style="font-size: 12px;"><!----><!----><!----></i>
          <div class="notice">
            <div role="alert" class="van-notice-bar"><!---->
              <div role="marquee" class="van-notice-bar__wrap">
                <van-swipe :autoplay="3000" :vertical="true">
                  <van-swipe-item style="height: 27px">
                    用户 jack*** 参与 同城约炮完成 激活成功
                  </van-swipe-item>
                  <van-swipe-item style="height: 27px">
                    用户 hank1* 参与 上门服务完成 激活成功
                  </van-swipe-item>
                  <van-swipe-item style="height: 27px">
                    用户 yong** 参与 同城约炮完成 激活成功
                  </van-swipe-item>
                  <van-swipe-item style="height: 27px">
                    用户 zhang** 参与 空降数据完成 激活成功
                  </van-swipe-item>
                  <van-swipe-item style="height: 27px">
                    用户 aiai** 参与 上门服务完成 激活成功
                  </van-swipe-item>
                  <van-swipe-item style="height: 27px">
                    用户 wugo** 参与 上门服务完成 激活成功
                  </van-swipe-item>
                </van-swipe>
              </div><!----></div>
          </div>
        </div>
      </div>
      <br>
      <div class="show-mall-div high-light-bg">
        <ul>
          <li>
            <img
                src="">
            <span>艺人网（北京）文化传媒</span>
          </li>
          <li>
            <span
                style="padding: 0 1.06667rem">本次数据作为直播间广告商品人气置顶商品排行榜,完成打赏后可免费开通观看视频/直播以及获取额外赠送的礼品。</span>
          </li>
          <li>与主播私下约啪</li>
        </ul>
      </div>
      <van-overlay :show="showDialog" @click="showDialog = false" />
      <div class="server-dialog" v-if="showDialog">
        <ul>
          <li>为您发现同城炮友</li>
          <li>本平台所有资源真实、安全、可靠、全国空降 选取您心仪的她 随时随地 开启约啪~</li>
          <li>联系专属接待客服</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import {getServiceList} from "@api/Service";
import {Toast} from "vant";

export default {
  name: "Welfare",
  data: function () {
    return {
      showDialog: false,
      services: []
    };
  },
  activated() {
    this.initService();
  },
  methods: {
    initService: function () {
      getServiceList().then(v => {
        this.services = v.data;
      })
    },
    gotoLive: function (id){
      let that = this;
      this.$router.push({ name: 'LiveReward', params:{ id: id, services:  that.services} })
    },
    gotoSign: function (){
		this.$router.push({
		  name: "Sign"
		})
      // Toast.fail({
      //   message: "功能开发中, 敬请期待",
      //   forbidClick: true,
      //   duration: 3000
      // })
    }
  }
};
</script>
<style scoped>
::v-deep .van-swipe__indicators {
  display: none;
}

::v-deep .van-swipe-item {
  color: #ed6a0c;
}

.server-dialog {
  position: fixed;
  display: flex;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 8rem;
  height: 4.8rem;
  z-index: 16;
  background-color: #f4ebf3;
  border: .02667rem solid #fa59b5;
  border-radius: .26667rem
}

.server-dialog ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.server-dialog ul > li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: .24rem
}

.server-dialog ul > li:first-child {
  color: #000;
  font-size: .48rem;
  font-weight: 700;
  margin: .10667rem
}

.server-dialog ul > li:nth-child(2) {
  font-size: .37333rem;
  padding: 0 .66667rem;
  color: #000;
  text-align: center
}

.server-dialog ul > li:nth-child(3) {
  background: linear-gradient(270deg, #fa59b5, #e38afb);
  color: #fff;
  font-size: .37333rem;
  width: 4.26667rem;
  height: .58667rem;
  border-radius: .29333rem
}

.scale-enter-from {
  opacity: 0;
  transform: scale(.7)
}

.scale-leave-to {
  opacity: 0
}

.scale-enter-to, .scale-leave-from {
  transition: all .15s cubic-bezier(.97, 1.73, .85, .77)
}

.welfare-list {
  width: 95%;
  background: #fff;
  margin: .26667rem auto;
  border-radius: .21333rem
}

.welfare-list ul {
  width: 100%
}

.welfare-list ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.2rem;
  width: 95%;
  margin: 0 auto;
  color: #000
}

.welfare-list ul li > div {
  display: flex;
  align-items: center
}

.welfare-list ul li > div:first-child > img {
  height: .53333rem;
  margin-right: .26667rem
}

.welfare-list ul li > div:first-child > span {
  font-size: .37333rem;
  font-weight: 700
}

.welfare-list ul li > div:nth-child(2) {
  justify-content: center
}

.welfare-list ul li > div:nth-child(2) > span {
  font-size: .32rem;
  color: #868686
}

.welfare-list ul li > div:nth-child(2) > div {
  width: 1.06667rem;
  height: 1.06667rem;
  margin: auto .26667rem;
  position: relative
}

.welfare-list ul li > div:nth-child(2) > div > img {
  height: 1.06667rem;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: .05333rem
}

.welfare-list ul li > div:nth-child(2) > div > i {
  position: absolute;
  width: .21333rem;
  height: .21333rem;
  background-color: red;
  border-radius: 50%;
  top: -.10667rem;
  right: -.10667rem
}

.welfare-list ul > li:not(:last-child) {
  border-bottom: .01333rem solid rgba(189, 192, 207, .5)
}

.border-class {
  border-radius: .26667rem;
  border: .02667rem solid #766350
}

.hot-game {
  width: 95%;
  background: #fff;
  padding: .8rem 0 .26667rem;
  margin: 1.33333rem auto .26667rem;
  border-radius: .21333rem;
  border: .02667rem solid #ff4ea3;
  position: relative;
  overflow: visible
}

.hot-game > div {
  width: calc(100% - .53333rem);
  margin: 0 auto
}

.hot-game .hot-title-div {
  position: absolute;
  top: -.53333rem;
  left: 2.32rem;
  width: 4.96rem;
  height: 1.06667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1
}

.hot-game .hot-title-div > img {
  height: 100%
}

.hot-game .hot-items-div .three-column-ul li {
  width: 33%
}

.hot-game .hot-items-div ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.hot-game .hot-items-div ul li {
  width: 48%;
  border-radius: .26667rem;
  background-color: #fff;
  overflow: hidden
}

.hot-game .hot-items-div ul li .pad-content {
  padding-bottom: 51.8%;
  position: relative;
  background-color: #504f4f
}

.hot-game .hot-items-div ul li .pad-content .van-image, .hot-game .hot-items-div ul li .pad-content .van-loading, .hot-game .hot-items-div ul li .pad-content img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.hot-game .hot-items-div ul li .pad-content .overlay-div {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center
}

.hot-game .hot-items-div ul li .pad-content .overlay-div span {
  font-size: .37333rem;
  font-weight: 500;
  color: #fff
}

.show-mall-div {
  width: calc(100% - .53333rem);
  margin: 0 auto;
  height: 4.8rem;
  background-image: url(../assets/img/tip/shopMall.png);
  background-size: cover;
  background-position: 50%;
  border-radius: .21333rem;
  overflow: hidden;
}

.show-mall-div ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, .4);
  border-radius: .21333rem;
}

.show-mall-div ul li {
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 1.6rem;
  width: 100%;
  display: flex
}

.show-mall-div ul > li:first-child img {
  height: 1.06667rem;
  margin-right: .26667rem;
  border-radius: .10667rem;
  opacity: .6
}

.show-mall-div ul > li:first-child span {
  font-size: .66667rem;
  font-weight: 700;
  color: #c8c8c8
}

.show-mall-div ul > li:nth-child(2) {
  width: 100%;
  font-size: .4rem;
  color: #c8c8c8;
  font-weight: 700;
}

.show-mall-div ul > li:nth-child(3) {
  font-size: .64rem;
  color: #ffb94f;
  font-weight: 700;
  font-family: PingFangSC-Medium, PingFang SC
}

.linear-gradient {
  width: 100%;
  height: .02667rem
}

.notice-bar {
  margin: .26667rem auto;
  width: 95%;
  padding: 0 .2rem;
  background-color: #fff;
  border-radius: .21333rem;
}

.notice-bar .wrapper {
  display: flex;
  align-items: center
}

.notice-bar .wrapper .icon {
  width: .66667rem;
  height: .66667rem;
  line-height: .66667rem;
  text-align: center;
  border-radius: 50%;
  background-color: #cacaca;
  color: #fff
}

.notice-bar .wrapper .notice {
  margin-left: .26667rem;
  flex: 1;
  height: .8rem;
  overflow: hidden
}

.notice-bar .wrapper .notice .van-notice-bar__content, .notice-bar .wrapper .notice .van-swipe {
  height: 100%
}

.notice-bar .wrapper .notice .van-notice-bar__content .van-swipe-item, .notice-bar .wrapper .notice .van-swipe .van-swipe-item {
  display: flex;
  align-items: center;
  padding-left: .4rem
}

.notice-bar .wrapper .notice ::v-deep(.van-notice-bar) {
  height: 1rem;
  background-color: #fffbe8;
  font-size: .38rem;
  width: calc(100% - .23333rem);
  border-radius: .10667rem
}

.notice-bar .wrapper .notice ::v-deep(.van-notice-bar) .left-img {
  height: 1.33333rem;
  margin-left: .13333rem
}

.notice-bar .wrapper .notice ::v-deep(.van-notice-bar) .van-notice-bar__content, .notice-bar .wrapper .notice ::v-deep(.van-notice-bar) .van-swipe {
  height: 100%
}

.notice-bar .wrapper .notice ::v-deep(.van-notice-bar) .van-notice-bar__content .van-swipe-item, .notice-bar .wrapper .notice ::v-deep(.van-notice-bar) .van-swipe .van-swipe-item {
  display: flex;
  align-items: center;
  padding-left: .4rem
}

.welfare-container {
  height: calc(100% - 1.33333rem);
}

.welfare-container .welfare-scroll {
  width: 100%;
  height: calc(100% - 1.06667rem);
  margin: 0 auto;
  overflow-x: auto
}

.welfare-container .banner {
  height: 4.1984rem
}

</style>
